<template>
	<div class="pingtuanstyle">
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form label-width="auto" style="max-width: 600px">
						<div class="title">选择活动</div>
						<div>
							<div>
								<div v-for="(item, index) in datas.goodsList" :key="index" class="list-item mb20 par10 pl10 bd2 mr10">
									<div class="name mb10 mt10">{{ item.title }}</div>
									<!-- <div class="content mb10">{{ item.discountContentView }}</div> -->
									<van-icon class="el-icon-circle-close" name="close" @click="deleteItem(index)" />
								</div>
							</div>
							<el-button plain @click="openGroup" :icon="Plus" class="mb10" v-if="datas.goodsList.length < 1">添加</el-button>
						</div>
						<div class="title">商品样式</div>
						<el-form-item label="选择风格">
							<el-radio-group v-model="datas.mode">
								<el-radio-button :label="1">
									<template #default>
										<span class="icon my-icon icon-shangxiabuju"></span>
									</template>
								</el-radio-button>
								<el-radio-button :label="2">
									<template #default><span class="icon my-icon icon-zuoyoujiegou"></span></template>
								</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<div class="mb20" v-if="datas.mode == 1">
							<el-form-item label="标题">
								<div class="flex">
									<el-input v-model="datas.goodsFields.title.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.title.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" v-model="datas.goodsFields.title.show" :true-label="1" :false-label="0" />
								</div>
							</el-form-item>
							<el-form-item label="价格">
								<div class="flex">
									<el-input v-model="datas.goodsFields.price.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.price.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.price.show" />
								</div>
							</el-form-item>
						</div>
						<div class="mb20" v-if="datas.mode == 2">
							<el-form-item label="商品标题">
								<div class="flex">
									<el-input v-model="datas.goodsFields.title.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.title.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.title.show" />
								</div>
							</el-form-item>

							<el-form-item label="副标题">
								<div class="flex">
									<el-input v-model="datas.goodsFields.subtitle.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.subtitle.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.subtitle.show" />
								</div>
							</el-form-item>

							<el-form-item label="商品价格">
								<div class="flex">
									<el-input v-model="datas.goodsFields.price.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.price.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.price.show" />
								</div>
							</el-form-item>

							<el-form-item label="原价">
								<div class="flex">
									<el-input v-model="datas.goodsFields.original_price.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.original_price.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.original_price.show" />
								</div>
							</el-form-item>

							<el-form-item label="销量">
								<div class="flex">
									<el-input v-model="datas.goodsFields.sales.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.sales.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.sales.show" />
								</div>
							</el-form-item>

							<el-form-item label="库存">
								<div class="flex">
									<el-input v-model="datas.goodsFields.stock.color">
										<template #prepend>
											<el-color-picker v-model="datas.goodsFields.stock.color" />
										</template>
									</el-input>
									<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.stock.show" />
								</div>
							</el-form-item>
						</div>

						<div class="mb20" v-if="datas.mode == 2">
							<div class="title">加购设置</div>
							<el-form-item label="加购按钮">
								<el-radio-group v-model="datas.buyNowStyle.mode">
									<el-radio :label="1">文字</el-radio>
									<el-radio :label="2">图片</el-radio>
								</el-radio-group>
							</el-form-item>

							<el-form-item label="上传图片" v-if="datas.buyNowStyle.mode == 2">
								<div class="choice-image choice-image-delete" @click="choiceFileImage(1)">
									<el-image v-if="datas.buyNowStyle.src != ''" :src="STATIC_URL + datas.buyNowStyle.src" fit="contain" />
									<el-icon v-else>
										<Plus />
									</el-icon>

									<div class="delete-content" @click.stop="datas.buyNowStyle.src = ''" v-if="datas.buyNowStyle.src != ''">
										<SvgIcon name="ele-DeleteFilled"></SvgIcon>

										<!-- <van-icon name="delete" /> -->
									</div>
								</div>
							</el-form-item>

							<div v-if="datas.buyNowStyle.mode == 1">
								<el-form-item label="文字">
									<el-input v-model="datas.buyNowStyle.text" />
								</el-form-item>
								<el-form-item label="背景1">
									<el-input v-model="datas.buyNowStyle.color1">
										<template #prepend>
											<el-color-picker v-model="datas.buyNowStyle.color1" />
										</template>
									</el-input>
								</el-form-item>
								<el-form-item label="背景2">
									<el-input v-model="datas.buyNowStyle.color2">
										<template #prepend>
											<el-color-picker v-model="datas.buyNowStyle.color2" />
										</template>
									</el-input>
								</el-form-item>
							</div>
						</div>
						<div class="title">商品角标</div>
						<el-form-item label="角标选择">
							<el-radio-group v-model="datas.tagStyle.show">
								<el-radio :label="0">不显示</el-radio>
								<el-radio :label="1">显示</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="图片" v-if="datas.tagStyle.show == 1">
							<div class="choice-image choice-image-delete" @click="choiceFileImage(0)">
								<el-image v-if="datas.tagStyle.src != ''" :src="STATIC_URL + datas.tagStyle.src" fit="contain" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>
								<div class="delete-content" @click.stop="datas.tagStyle.src = ''" v-if="datas.tagStyle.src != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>

									<!-- <van-icon name="delete" /> -->
								</div>
							</div>
						</el-form-item>

						<div class="title">样式</div>
						<el-form-item label="上圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusTop" />
								<el-input class="ml20" v-model="datas.borderRadiusTop"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="下圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusBottom" />
								<el-input class="ml20" v-model="datas.borderRadiusBottom"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="间距">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.space" />
								<el-input class="ml20" v-model="datas.space"></el-input>
							</div>
						</el-form-item>

						<!-- 
						<div class="title">商品角标</div>
						<el-form-item label="角标选择">
							<el-radio-group>
								<el-radio :label="0">不显示</el-radio>
								<el-radio :label="1">显示</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="上传图片">
							<div class="choice-image" @click="choiceFileImage(1)">
								<el-image v-if="datas.buyNowStyle.src != ''" :src="STATIC_URL + datas.buyNowStyle.src" fit="contain" />
								<el-icon v-else>
									<Plus />
								</el-icon>
							</div>
						</el-form-item> -->
					</el-form>
				</div>
				<!-- 表单 -->
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<Group ref="GroupRef" @choice="choiceGroup"></Group>
		<FileChoice ref="FileChoiceRef" @choice-file="choiceFileCallBack"></FileChoice>
	</div>
</template>

<script setup lang="ts" name="pingtuanstyle">
import { defineAsyncComponent, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { GroupApi } from '/@/api/shop/group/index';
import { STATIC_URL } from '/@/utils/config';
const Group = defineAsyncComponent(() => import('/@/views/shop/activity/group/choice/index.vue'));
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const GroupRef = ref();
const FileChoiceRef = ref();
const props = defineProps({
	datas: {},
});
let img_flag = 0;
const openGroup = () => {
	GroupRef.value.onOpen();
};

const choiceGroup = async (group: ChoiceGroup[]) => {
	const { data } = await GroupApi().view(group[0].groupId);
	console.log('group data: ', data.groupItems);
	props.datas.goodsList = data.groupItems;
};

const choiceFileImage = (flag: number) => {
	img_flag = flag;
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFileCallBack = (cfi: ChoiceFileInfo[]) => {
	if (img_flag === 0) {
		props.datas.tagStyle.src = cfi[0].visitRelativePath;
	} else if (img_flag === 1) {
		props.datas.buyNowStyle.src = cfi[0].visitRelativePath;
	}
};

const deleteItem = (index: number) => {
	props.datas.goodsList.splice(index, 1);
};
</script>

<style scoped lang="scss">
.pingtuanstyle {
	width: 100%;
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}

	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
